import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:mvvm_provider/base/multi_state_widget.dart';
import 'package:mvvm_provider/base/provider_selector_widget.dart';
import 'package:mvvm_provider/base/select_plus_data.dart';
import '../../../base/base_stateful_page.dart';
import '../../../base/common_refresher.dart';
import '../../../base/provider_consumer_widget.dart';
import '../../../routers/home_router.dart';
import '../../../routers/navigator_utils.dart';
import '../../../widgets/swiper_widget/swiper_widget.dart';
import '../../home/widgets/car_toon_widget.dart';
import '../view_model/book_shelf_view_model.dart';
import '../widgets/crosswise_widget.dart';
import 'package:collection/collection.dart';

class BookShelfPage extends BasePage {
  const BookShelfPage({super.key});

  @override
  BasePageState<BasePage> getState() => _BookShelfPageState();
}

class _BookShelfPageState extends BasePageState<BookShelfPage> {
  BookShelfViewModel bookShelfViewModel = BookShelfViewModel();

  @override
  void initState() {
    super.initState();
    super.pageTitle = '书架';
    isBack = false;
    _onRefresh();
  }

  @override
  Widget left() {
    return const SizedBox();
  }

  /// 请求分页
  int _pageNum = 1;

  /// 上拉加载
  void _onLoading() {
    _pageNum++;
    getListData();
  }

  /// 下拉刷新
  void _onRefresh() {
    _pageNum = 1;
    getListData();
  }

  void getListData() {
    bookShelfViewModel.getListData(
        getUrl(_pageNum), 'https://run.mocky.io/v3/8836074c-75e9-4384-8149-9faadbdedca0', _pageNum);
  }

  String getUrl(int number) {
    String urlStr = '';
    if (_pageNum == 1) {
      urlStr = 'https://run.mocky.io/v3/8d98fef7-634f-4122-a837-8c9ee892365e';
    } else if (_pageNum == 2) {
      urlStr = 'https://run.mocky.io/v3/d415f483-bdbf-445d-ae12-703d1fd01e97';
    } else if (_pageNum == 3) {
      urlStr = 'https://run.mocky.io/v3/a9faaec6-d70f-4365-95b2-6abdd35a6e28';
    } else {
      urlStr = '';
    }
    return urlStr;
  }

  /// 轮播图
  Widget _bannerWidget() {
    return SwiperWidget(
      imagesList: bookShelfViewModel.state.bannerList,
      width: 1.sw,
      height: 120.h,
      type: 1,
      onTap: (int index) {},
      indexChangeTap: (int index) {},
    );
  }

  /// 网格布局
  Widget _collectionWidget(int index) {
    return CarToonWidget(
      index: index,
      model: bookShelfViewModel.state.dataList[index],
      isStaggeredGrid: true,
      onTap: () {
        NavigatorUtils.push(context, HomeRouter.bookShelfDetailPage,
            arguments: {"imageUrl": bookShelfViewModel.state.dataList[index].image});
      },
    );
  }

  /// 横向布局
  Widget _crosswiseWidget(int index) {
    return CrosswiseWidget(
      model: bookShelfViewModel.state.dataList[index],
      onTap: () {
        NavigatorUtils.push(context, HomeRouter.bookShelfDetailPage,
            arguments: {"imageUrl": bookShelfViewModel.state.dataList[index].image});
      },
    );
  }

  @override
  Widget buildPage(BuildContext context) {
    return ProviderConsumerWidget<BookShelfViewModel>(
      viewModel: bookShelfViewModel,
      builder: (context, viewModel, child) {
        return MultiStateWidget(
            netState: viewModel.state.netState,
            placeHolderType: PlaceHolderType.staggeredGridPlaceHolder,
            builder: (BuildContext context) {
              return CommonRefresher(
                  enablePullDown: true,
                  enablePullUp: true,
                  refreshController: viewModel.refreshController,
                  onRefresh: _onRefresh,
                  onLoading: _onLoading,
                  listWidget: SingleChildScrollView(
                    controller: viewModel.scrollController,
                    child: StaggeredGrid.count(
                      crossAxisCount: 2,
                      mainAxisSpacing: 10.h,
                      crossAxisSpacing: 0,
                      children: [
                        ...viewModel.state.dataList.mapIndexed((index, tile) {
                          return StaggeredGridTile.extent(
                            crossAxisCellCount: tile.crossAxisCount,
                            mainAxisExtent:
                                index == 0 ? 200.h : (tile.crossAxisCount == 2 ? 180.h : 260.h),
                            child: index == 0
                                ? _bannerWidget()
                                : tile.crossAxisCount == 1
                                    ? _collectionWidget(index)
                                    : _crosswiseWidget(index),
                          );
                        }),
                      ],
                    ),
                  ));
            });
      },
    );
  }
}
